/**
 * @file 分类树列表脚手架模板
 * @author LZK
 * @overview 视图查看
 */
<template>
  <TreeListLayout>
    <div slot="layout-tree">
      <Tree
      :data="dataTree"
      @on-select-change="onSelectChange">
      </Tree>
    </div>
    <div slot="layout-content">
      <!-- 统一搜索组件 -->
      <SearchLayout
      @on-search="onSearch"
      :list="searchList" />
      <!-- 统一操作组件 -->
      <OperationLayout
      :list="operationList"/>
      <!-- 列表行内编辑组件 -->
      <Table
        :loading="loadingTable"
        border
        class="uit-table-item"
        :data="dataTable"
        @on-selection-change="tableSelectChange"
        :columns="columnsData" />
      <Page
        :total="pageCount"
        @on-page-size-change="onPageSizeChange"
        @on-change="onPageChange"/>
    </div>
    <DeleteModal
      v-model="showDeleteModal"
      @on-ok="confirmDelete" />
    <Modal
      :title="ModalTitle"
      @on-ok="onModalConfrim"
      :loading="true"
      ref="middleModal"
      class="uit-form-modal"
      v-model="showModal">
      <ModalResources
        :formItem="formItem"
        ref="modalResource" />
    </Modal>
  </TreeListLayout>
</template>
<script>
/*
 * @description 操作布局组件
 */
import OperationLayout from '@/components/operation-layout'
/*
 * @description 翻页组件
 */
import Page from '@/components/page'
/*
 * @description 引入表单校验混合
 */
import mixinValidate from '@/mixins/validate'
/*
 * @description 引入搜索布局
 */
import SearchLayout from '@/components/search-layout'
/*
 * @description 引入table组件配置文件
 */
import {columnsData} from './table'
/*
 * @description 引入自定义模态框
 */
import Modal from '@/components/modal'
/*
 * @description 引入表单资源组件
 */
import ModalResources from './modalResources'
/*
 * @description 引入iconfont组件
 */
import TreeListLayout from '@/page/business/treelist-layout'
/*
 * @description 引入统一搜索配置
 */
import searchConf from './search-conf'
/*
 * @description 引入列表操作配置
 */
import operationConf from './operation-conf'
/*
 * @description 引入删除模态框组件
 */
import DeleteModal from '@/page/business/delete-modal'
/*
 * @description 引入vuex语法糖，方便获取和设置全局属性
 */
import {mapGetters, mapMutations} from 'vuex'
/*
 * @description 模板接口前缀
 */
const requestPrefix = 'http://www.doclever.cn:8090/mock/5b484584362f91495c091d11/getList'
const requestPrefixTree = 'http://www.doclever.cn:8090/mock/5b484584362f91495c091d11/treeList'
/*
 * @description 导出组件默认接口
 */
export default {
  //混入表单校验
  mixins: [mixinValidate],
  /*
   * @description 双向绑定定义区域，所有需要双向绑定的值都必须定义到data中
   */
  data () {
    return {
      //树形菜单数据
      dataTree: [],
      //列表菜单数据
      dataTable: [],
      //列表加载状态
      loadingTable: true,
      //列表总条数
      pageCount: 0,
      //初始化currentPage
      currentPage: 1,
      //是否展示删除模态框
      showDeleteModal: false,
      //是否展示大模态框
      showModal: false,
      //分类ID
      classifyId: '',
      formItem: {},
      ModalTitle: '新增'
    }
  },
  computed: {
    ...mapGetters([
      'pageSize'
    ])
  },
  /*
  * @description 为子组件提供服务，此方法只适用于子组件
  */
  provide () {
    return {
      deleteItem: this.deleteItem,
      changeEdit: this.changeEdit
    }
  },
  /*
   * @description created生命周期为最近可以获取到data数据的钩子，所有涉及到渲染，
   * 但是不涉及双向绑定的值可以定义在这个生命周期中
   */
  created () {
    //初始化table配置
    this.columnsData = columnsData
    // 获取树形列表
    this.getTreeList()
    //获取内容列表
    this.getList()
    //初始化table多选项队列
    this.activeTableSelect = []
    //初始化统一搜索列表配置
    this.searchList = searchConf.call(this)
    //初始化操作列表配置
    this.operationList = operationConf.call(this)
    //初始化搜索参数
    this.searchParam = {
      title: '',
      mz: '',
      time: ''
    }
  },
  components: {
    ModalResources,
    TreeListLayout,
    SearchLayout,
    OperationLayout,
    Page,
    Modal,
    DeleteModal
  },
  watch: {
    classifyId () {
      this.currentPage = 1
      this.getList()
    }
  },
  methods: {
    /*
    * @description 注入vuex的mutation，修改pageSize
    * 注意：单向数据流
    */
    ...mapMutations({
      mutationPageSize: 'PAGE_SIZE'
    }),
    /*
    * @description 获取树形菜单
    */
    getTreeList () {
      //重置表格状态
      this.loadingTable = true
      this.$ajax({
        url: `${requestPrefixTree}`,
        method: 'GET'
      }).then(({data}) => {
        // 默认展开第一级
        data.data[0] && (data.data[0].expand = true)
        //双向绑定，将树形菜单赋值给绑定值
        this.dataTree = data.data
        //加载完成
        this.loadingTable = false
        //初始化分类ID
        this.classifyId = this.dataTree[0] ? this.dataTree[0].id : ''
      })
    },
    /*
    * @description 获取列表数据
    */
    getList () {
      //重置状态
      this.loadingTable = true
      this.$ajax({
        url: `${requestPrefix}`,
        method: 'GET',
        data: {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          classifyId: this.classifyId,
          ...this.searchParam
        }
      }).then(({data}) => {
        //双向绑定table列表数据
        this.dataTable = data.data
        //双向绑定，翻页总条数
        this.pageCount = data.count
        //重置状态
        this.loadingTable = false
      })
    },
    /*
    * @description 根据type来映射是否是重置
    * @params type {String} 重置时候为reset
    */
    onSearch (params) {
      this.currentPage = 1
      this.searchParam = params
      this.getList()
    },
    /*
    * @description 表格选中事件
    */
    tableSelectChange (list) {
      //重置选中项
      this.activeTableSelect = list
    },
    /*
    * @description 树形菜单点击事件
    */
    onSelectChange (items) {
      this.classifyId = items[0] ? items[0].id : ''
    },
    /*
    * @description 下拉改变触发
    */
    dropChange () {
      let isEdit = this.activeTableSelect.some(item => item.isEdit)
      if (!this.activeTableSelect.length || isEdit) {
        this.$Message.error(`当前没有选中项`)
        return
      }
      this.showDeleteModal = true
    },
    /*
     * @description 模态确认
     */
    onModalConfrim () {
      //校验规则
      this.$refs.modalResource.validateFrom().then(validate => {
        if (!validate) return
        //发送请求保存
        this.$ajax({
          url: `${requestPrefix}`,
          method: 'POST',
          data: this.formItem
        }).then(({data}) => {
          this.showModal = false
          this.getList()
          this.$refs.middleModal.close()
        })
      })
    },
    /*
    * @description 确认批量删除
    */
    confirmDelete () {
      this.$ajax({
        url: `${requestPrefix}`,
        method: 'DELETE',
        data: {
          //LHG
          ids: this.activeTableSelect.map(item => item.id)
        }
      }).then(({data}) => {
        this.showDeleteModal = false
        this.getList()
      })
    },
    /*
     * @description 翻页页码改变
     */
    onPageSizeChange (pageSize) {
      this.mutationPageSize(pageSize)
      this.getList()
    },
    /*
     * @description 翻页按钮点击
     */
    onPageChange (page) {
      this.currentPage = page
      this.getList()
    },
    /*
     * @description 大模态新增
     */
    addModal () {
      this.ModalTitle = '新增'
      this.formItem = Object.assign(this.formItem, {
        profession: '',
        duties: '',
        user: {
          userInfo: ''
        },
        title: ''
      })
      this.showModal = true
    },
    /*
    * @description 改变页面展示页码数
    * @params {Object} 删除数据元数据
    * 注意：此方法用于provide，供子组件使用，禁止本组件使用
    */
    deleteItem (data) {
      return this.$ajax({
        url: `${requestPrefix}`,
        method: 'DELETE',
        data: {
          //LHG
          id: data.id
        }
      }).then(({data}) => {
        this.getList()
      })
    },
    /*
    * @description 编辑与取消，使用与新增情况下
    * @params {Object} 要编辑的数据元素
    * 注意：此方法用于provide，供子组件使用，禁止本组件使用
    */
    changeEdit (index) {
      this.ModalTitle = '编辑'
      //可以支持异步获取，初始化formItem，表单字段数据
      this.formItem = {
        title: '模板名称',
        profession: 'IT',
        duties: '',
        dutiesList: [{
          label: '前端',
          value: 'Front'
        }, {
          label: '后端',
          value: 'BackEnd'
        }, {
          label: '全栈',
          value: 'FullStack'
        }],
        professionList: [{
          label: '医生',
          value: 'Doctor'
        }, {
          label: 'IT',
          value: 'IT'
        }, {
          label: '教师',
          value: 'Teacher'
        }],
        user: {
          userInfo: '这是个人简介'
        }
      }
      this.showModal = true
    }
  }
}
</script>
<style lang="scss" scoped></style>
